<div v-bind:class="[componentId]">
    <cly-datatable-n  ref="compareEvents" :force-loading="isTableLoading" :rows="eventsTableRows" @select="handleCurrentChange" :keyFn="function(row) {return row.id}" @select-all="handleAllChange">
      <template v-slot:header-left="selectScope">
      </template>
      <template v-slot="scope">
        <el-table-column fixed="left" type="selection" :reserve-selection="true" width="55">
        </el-table-column>
        <el-table-column sortable="true" prop="name" :label="i18n('compare.events.event')">
          <template v-slot="rowScope">
            <div class="has-ellipsis">
              {{rowScope.row.name}}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="c" :label="i18n('compare.events.count')">
          <template v-slot="rowScope">
            <div>
              {{rowScope.row.c}}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="s" :label="i18n('compare.events.sum')">
          <template v-slot="rowScope">
            <div>
              {{rowScope.row.s}}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="dur" :label="i18n('compare.events.duration')">
          <template v-slot="rowScope">
            <div>
              {{formatDuration(rowScope.row.dur)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable="true" prop="avgDur" :label="i18n('compare.events.avg-duration')">
          <template v-slot="rowScope">
            <div>
              {{formatDuration(rowScope.row.avgDur)}}
            </div>
          </template>
        </el-table-column>
      </template>
    </cly-datatable-n>
  </div>